<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0039)https://peterned.home.xs4all.nl/demooo/ -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  <title>Clay - A 3D engine on canvas</title>
  <script type="text/javascript" src="./clay.min.js"></script>
  <script type="text/javascript">
  function Earth() {

    var stage = new Clay.Stage(800, 600);
    var world = stage.getWorld();
    var camera = stage.getCamera();

    camera.set(0, 0, 0);
    camera.setResolution(800, 600);
    camera.setTarget(new Clay.Vector(-100, 0, 100));

    window.onresize = function() {
      stage.resizeTo(
        window.innerWidth || document.documentElement.clientWidth,
        window.innerHeight || document.documentElement.clientHeight
      );
    };

    window.onresize();

    Clay.Collada.load('static/earth.xml', function(scene) {
      scene.init(stage);

      var earth = new Clay.Texture('static/earthmap1k.jpg', stage);

      var clouds = new Image();
      clouds.src = 'static/earthclouds1k.png';

      var dark = new Image();
      dark.src = 'static/darkside.png';

      var waiting = setInterval(function() {
        if (earth.complete && clouds.complete && dark.complete) {
          clearInterval(waiting);
          play();
        }
      }, 1000);

      function play() {
        var shape = world.getShapes()[0];
        shape.setMaterial(earth);

        var x, y, z, t = Math.PI / 4,
          r = 0,
          tick = 0.01,
          radius = 200;
        var ttx = earth.canvas.getContext('2d');
        var base = earth.image;
        var wind = 0;

        stage.addEvent('enterframe', function() {

          ttx.drawImage(base, 0, 0);
          var pos = (++wind) % 1000;
          ttx.drawImage(clouds, pos, 0);
          ttx.drawImage(clouds, pos - 1000, 0);
          ttx.drawImage(dark, 0, 0);

          t += tick;
          x = -100 + Math.sin(t) * radius;
          z = 100 + Math.cos(t) * radius;
          y = Math.cos(t / 3) * 50
          camera.set(x, y, z);
        });

        stage.run();
      }
    });
  }

  window.addEventListener('load', function() {
    new Earth();
  }, false);
  </script>
  <style type="text/css">
  html,
  body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    background: black;
  }

  .canvas3D {
    background: black;
    position: absolute;
    left: 0;
    top: 0;
  }
  </style>
</head>

<body>
  <div id="canvas">
    <!-- canvas, centered on screen  -->
  </div>
  <script src="./urchin.js" type="text/javascript"></script>
  <script type="text/javascript">
  _uacct = "UA-472607-1";
  urchinTracker();
  </script>
  <canvas class="canvas3D" width="1920" height="921"></canvas>
</body>

</html>